<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>网站访问测试</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            max-width: 800px;
            margin: 0 auto;
            padding: 20px;
        }
        .test-section {
            margin-bottom: 30px;
            padding: 15px;
            border: 1px solid #ddd;
            border-radius: 5px;
        }
        button {
            padding: 8px 16px;
            margin-right: 10px;
            cursor: pointer;
        }
        #result {
            margin-top: 15px;
            padding: 10px;
            background-color: #f5f5f5;
            border-radius: 4px;
        }
    </style>
</head>
<body>
    <h1>网站访问测试</h1>

    <div class="test-section">
        <h2>测试 1: 加载外部图片</h2>
        <button onclick="testImageLoad()">测试图片加载</button>
        <div id="image-result"></div>
    </div>

    <div class="test-section">
        <h2>测试 2: 跨域请求</h2>
        <button onclick="testCorsRequest()">测试跨域请求</button>
        <div id="cors-result"></div>
    </div>

    <div class="test-section">
        <h2>测试 3: 访问 HTTP 网站</h2>
        <button onclick="testHttpSite()">访问 HTTP 网站</button>
        <div id="http-result"></div>
    </div>

    <script>
        function testImageLoad() {
            const resultDiv = document.getElementById('image-result');
            resultDiv.innerHTML = '加载中...';

            const img = new Image();
            img.src = 'https://picsum.photos/400/200';
            img.onload = function() {
                resultDiv.innerHTML = '<p>图片加载成功!</p><img src="' + img.src + '" style="max-width: 100%;">';
            };
            img.onerror = function() {
                resultDiv.innerHTML = '<p style="color: red;">图片加载失败!</p>';
            };
        }

        function testCorsRequest() {
            const resultDiv = document.getElementById('cors-result');
            resultDiv.innerHTML = '请求中...';

            fetch('https://jsonplaceholder.typicode.com/posts/1')
                .then(response => response.json())
                .then(data => {
                    resultDiv.innerHTML = '<p>跨域请求成功!</p><pre>' + JSON.stringify(data, null, 2) + '</pre>';
                })
                .catch(error => {
                    resultDiv.innerHTML = '<p style="color: red;">跨域请求失败: ' + error.message + '</p>';
                });
        }

        function testHttpSite() {
            const resultDiv = document.getElementById('http-result');
            // 注意: 这里使用的是 HTTPS 网站，因为纯 HTTP 网站可能已经很少
            // 但我们的设置允许加载 HTTP 内容
            window.open('https://www.baidu.com', '_blank');
            resultDiv.innerHTML = '<p>已尝试打开百度网站</p>';
        }
    </script>
</body>
</html>